<template>
	<view class="content">
		<view class="tab_list">
			<text v-for="(item,index) in tab_list" :key="index" @click="changeTab(index)" :class="{'active':item.isActive}">{{item.title}}</text>
			
		</view>
		<template v-if="!list.length">
			<view class="noData">
				<view class="noDataImg">
					<image src="../../static/img/noData.png" mode="" style="width: 298rpx;height: 339rpx;"></image>
				</view>
				<view class="noDataTitle">
					<view>暂无收藏</view>
					<view>您还没有收藏哦</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="fineArts">
				<view class="occupancy_list_item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<image :src="imageUrl+shopCover" mode="" style="width: 182rpx;height: 172rpx;"></image>
					<view class="occupancy_rt">
						<view class="occupancy_rt_title">
							<text>{{item.shopTitle}}</text>
							<image :src="item.isHouses?'../../static/img/Collection_out.png':'../../static/img/Collection_in.png'" mode="" style="width: 27rpx;height: 27rpx;"></image>
						</view>
						<view class="search_label">
							<text>{{item.shopCategorys}}</text>
						</view>
						<view class="occupancy_rt_address">
							<image src="../../static/img/age.png" mode="" style="width: 22rpx;height: 20rpx;"></image>
							<text>招生年龄段：{{item.mechanismAges}}岁</text>
						</view>
						<view class="occupancy_browse">
							<view>
								山东临沂市561.12km
							</view>
							<view >
								<image src="../../static/img/browse.png" mode="" style="width: 26rpx;height: 20rpx;"></image>
								<text>{{item.mechanismAges}}万人浏览</text>
							</view>
							
						</view>
						
					</view>
				</view>
			</view>
		</template>
		<!-- 打电话 -->
		<view class="pay_box" v-if="isShowPhone" @click="isShowPhone=false">
			<view class="phone_box">
				<view class="phone_box_item">
					18846738902
				</view>
				<view class="phone_box_item">
					呼叫
				</view>
				<view class="pay_btn" style="margin-top: 36rpx;background-color: #E6E6E6;" @click="isShowPhone=false">
					<text style="margin:0;color: #333333;">取消</text>
		
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from "../../static/js/mixin.js"
	export default{
		mixins: [mixin],
		data(){
			return {
				isShowPhone:false,
				tab_list:[{
					title:'课程',
					isActive:true
				},{
					title:'职位',
					isActive:false
				},{
					title:'品牌',
					isActive:false
				}],
				hasData:true,
				pageRow:1,
				pageSize:10,
				index:0,
				list:[],
				imageUrl:"",
				
				
			}
		},
	    onShow() {
	    	this.userHouses(this.index)
	    },
		methods:{
			//进入详情
			goDetail(item){
				if(this.index==0){//课程
					uni.navigateTo({
						url: '../subjectSub/curriculum?id=' + item.id
					});
				}else if(this.index==1){//职位
					
				}else{//品牌
					uni.navigateTo({
					    url: '../subjectSub/mechanismDetail?id='+item.id
					});
				}
			},
			//收藏列表
			userHouses(type){
				this.$http.get('/api/user/userHouses',{
					    areaCode:this.cityCode,
						"pageRow": this.pageRow,
						"pageSize": this.pageSize,
						"type": type
					   
				}).then((data)=>{
					if(data.data.code==200){
						if(data.data.result){
							this.list=data.data.result.records;
							this.imageUrl=data.data.imageUrl;
						}else{
							this.list=[]
						}
						
					}else{
						this.list=[];
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			changeTab(index){
				this.index=index;
				this.tab_list.forEach((a,i)=>{
					a.isActive=false;
					if(index==i){
						a.isActive=true;
					}
				})
				this.userHouses(this.index);
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/Collection.scss'
</style>